<template>
  <div class="video-tutorial">
    <!-- 搜索条件 -->
    <el-form :model="state.form" :inline="true" class="my-form">
      <el-form-item label="视频标题">
        <el-input clearable v-model="state.form.title" style="width: 130px;" placeholder="请输入视频标题" />
      </el-form-item>
      <el-form-item label="频道">
        <el-select clearable v-model="state.form.channel_label" placeholder="全部" style="width: 120px;"
          @change="selectChannel">
          <el-option :label="item.cn_name" :value="item.id" v-for="(item, index) in channelList" :key="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select clearable v-model="state.form.status_label" placeholder="全部" style="width: 120px;"
          @change="selectStatus">
          <el-option label="上架" value="1" />
          <el-option label="下架" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" icon="Search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- add -->
    <div class="add">
      <el-button icon="Plus" type="primary" @click="add">新增视频教程</el-button>
    </div>
    <!-- 表格 -->
    <div class="my-table">
      <el-table :data="tableData" style="width: 100%" border v-loading="loadingData">
        <el-table-column align="center" :prop="item.prop" :label="item.label" v-for="(item, index) in tableColumn"
          :key="index">
          <template #default="scope" v-if="item.prop == 'channel'">
            {{ scope.row.channel == 2 ? '售后维修' : '基础使用' }}
          </template>
          <template #default="scope" v-if="item.prop == 'handle'">
            <el-button type="primary" size="small" @click.stop="add(scope.row)">编辑</el-button>
            <el-button :type="scope.row.status == 1 ? 'danger' : 'primary'" size="small"
              @click.stop="setStatus(scope.$index, scope.row)" :loading="btnLoding && btnIndex == scope.$index">{{
                scope.row.status == 1 ? '下架' : '上架' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码导航 -->
    <div class="page flexCenter">
      <el-pagination background layout="prev, pager, next" @current-change="pageChange" @prev-click="pageChange"
        @next-click="pageChange" :total="count" :page-size="state.form.limit" />
    </div>
  </div>
</template>

<script setup name="VideoTutorial">
import { ref, reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { videoTutorialsGetEnum, videoTutorials, videoTutorialsSetStatus } from '@/api/operateManage/videoManage';
import { useCommonStore } from '@/stores';
import { isEmpty } from "lodash-es";
const commonStore = useCommonStore();
const router = useRouter()

const page = ref(1)
const count = ref(0)
const btnLoding = ref(false)
const btnIndex = ref(0)
const loadingData = ref(false)

// 如果要使用reactive，直接声明单个对象使用不便，可以考虑外包一层顶级对象
const state = reactive({
  form: {
    page: page.value,
    limit: 20,
    channel: '',
    status: '',
    status_label: '',
    title: ''
  }
})
const channelList = ref([]);

const tableColumn = ref([
  { label: '编号 ', prop: 'id' },
  { label: '频道', prop: 'channel' },
  { label: '展示顺序', prop: 'sort' },
  { label: '视频标题', prop: 'title' },
  { label: '状态', prop: 'status_label' },
  { label: '创建时间', prop: 'create_time' },
  { label: '操作', prop: 'handle' },
])



const tableData = ref([])


// methods

const search = async () => {
  loadingData.value = true;
  const res = await videoTutorials(state.form);
  if (res.code === 1000) {
    tableData.value = res.data.listData.list;
    count.value = res.data.listData.count;
  }
  loadingData.value = false;
}

const add = (item) => {
  commonStore.videoItem = item;
  router.push({
    name: "VideoTutorialAdd", query: {
      id: item.id
    }
  })
}


const selectChannel = (val) => {
  state.form.channel = val
}

const selectStatus = (val) => {
  state.form.status = val
}

const setStatus = async (index, item) => {
  btnLoding.value = true;
  btnIndex.value = index;
  const status = item.status === 1 ? 2 : 1;
  const res = await videoTutorialsSetStatus({ status, ids: [item.id] });
  if (res.code === 1000) {
    tableData.value[index].status = status;
    tableData.value[index].status_label = status === 1 ? "上架中" : "下架中";
  }
  btnLoding.value = false;
}


const pageChange = (page) => {
  page.value = page
  search()
}


// lify cycle
onBeforeMount(async () => {
  // 频道
  if (!isEmpty(commonStore.videoTutorialStatusEnum)) {
    channelList.value = commonStore.videoTutorialStatusEnum.channel;
  } else {
    const channelRes = await videoTutorialsGetEnum()
    if (channelRes.code === 1000) {
      channelList.value = channelRes.data.channel;
      commonStore.videoTutorialStatusEnum = channelRes.data
    }
  }

  search(state.form);
})


</script>

<style lang="less" scoped>
.video-tutorial {
  .add {
    margin: 0 20px;
  }

  .my-table {
    margin: 20px;
  }
}

.my-form {
  padding: var(--el-main-padding);
  font-size: 16px;

  .text-center {
    text-align: center;
  }

  :deep(.el-form-item) {
    margin-right: 25px;
  }
}</style>